<!--
 * @Author: your name
 * @Date: 2021-08-04 20:12:14
 * @LastEditTime: 2021-08-11 18:03:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \toutiao-me:\super-double-master\src\views\service\index.vue
-->
<!--
 *                   ___====-_  _-====___
 *             _--^^^#####//      \\#####^^^--_
 *          _-^##########// (    ) \\##########^-_
 *         -############//  |\^^/|  \\############-
 *       _/############//   (@::@)   \############\_
 *      /#############((     \\//     ))#############\
 *     -###############\\    (oo)    //###############-
 *    -#################\\  / VV \  //#################-
 *   -###################\\/      \//###################-
 *  _#/|##########/\######(   /\   )######/\##########|\#_
 *  |/ |#/\#/\#/\/  \#/\##\  |  |  /##/\#/  \/\#/\#/\#| \|
 *  `  |/  V  V  `   V  \#\| |  | |/#/  V   '  V  V  \|  '
 *     `   `  `      `   / | |  | | \   '      '  '   '
 *                      (  | |  | |  )
 *                     __\ | |  | | /__
 *                    (vvv(VVV)(VVV)vvv)
 *
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *                神兽保佑            永无BUG
 -->

<!--
 * @Author: your name
 * @Date: 2021-08-04 20:12:14
 * @LastEditTime: 2021-08-04 20:12:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \toutiao-me:\super-double-master\src\views\service\index.vue

-->
<!--  -->
<template>
  <div class="Service">
    <van-nav-bar left-text="家政服务标准" left-arrow />
    <div class="Service-ss" />
    <div class="Service-sss">
      <span class="span" style="font-size: 10px">服务标准</span>
      <van-divider />
      <span style="font-size: 10px">服务区域:</span>
      <XiaLa class="xiala" style="" />
      <!-- <van-icon name="arrow-down" size="10px" /> -->
      <van-divider />
      <p style="font-size: 10px">服务类型:</p>
      <span
        class="hot_item"
        :class="{ activ: active == obj.name }"
        v-for="(obj, index) in list"
        :key="index"
        @click="selected(obj.name)"
        >{{ obj.name }}</span
      >
      <van-divider />
      <p style="font-size: 10px">星级标准:</p>
      <span class="hot_item"> 一星 </span>
      <span class="hot_item"> 二星 </span>
      <span class="hot_item"> 三星 </span>
      <span class="hot_item"> 四星 </span>
      <span class="hot_item"> 五星 </span>
      <span class="hot_item"> 六星 </span>
      <span class="hot_item"> 七星 </span>
    </div>

    <button class="button">家政服务标准查询</button>
  </div>
</template>

<script>
// 导入的其他文件 例如：import moduleName from 'modulePath';
import { getService } from '../../api/index'
import XiaLa from '../../components/tabbar/service.vue'
export default {
  name: 'Service',

  // import所引入的组件注册
  components: {
    XiaLa
  },

  // 子组件进行数据接收
  props: {},

  data () {
    return {
      // 接受服务类型的数组
      list: [],
      active: ''
    }
  },

  // 监听属性
  computed: {},

  // 监控data中的数据变化
  watch: {},

  // 方法集合
  methods: {
    selected (name) {
      this.active = name
    }
  },

  // 生命周期 - 组件实例刚被创建
  beforeCreate () {},
  // 创建完成 访问当前this实例
  async created () {
    console.log(11)
    const { data } = await getService()
    // this.list = await getService();

    console.log(data)
    this.list = data
    console.log(this.list)
  },
  // 挂载之前
  beforeMount () {},
  // 挂载完成 访问DOM元素
  mounted () {},
  // 更新之前
  beforeUpdate () {},
  // 更新之后
  updated () {},
  // for keep-alive 缓存功能，组件被激活时调用
  activated () {},
  // for keep-alive 组件被移除时调用
  deactivated () {},
  // 组件销毁之前调用
  beforeDestroy () {},
  // 组件销毁之后调用
  destroyed () {}
}
</script>
<style  scoped>
.Service {
  background-color: #f8f8f8;
  height: 1440px;
}
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 10px;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 5px;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
.span {
  width: 50px;
  height: 25px;
  border-left: 5px solid #3f51b5;
}
.button {
  position: absolute;
  bottom: -65px;
  background-color: #3f51b5;
  width: 100%;
  height: 100px;
  color: #ffffff;
}
.van-hairline--bottom::after{
  border-bottom-width:0px ;
}
/deep/ .Service-ss {
  background-color: #3f51b5;
  width: 100%;
  height: 100px;
  margin: auto;
}
/deep/ .Service-sss {
  background-color: #ffffff;
  padding: 0.266667rem;
  width: 650px;
  height: 750px;
  margin: auto;
  margin-top: -90px !important;
  border-radius: 50px;
}
/deep/ .van-icon-arrow-down {
  margin-left: 500px;
}

/deep/ .van-nav-bar__content {
  background-color: #3f51b5;
}
/deep/ .p {
  font-size: 15px;
  color: black;
}
/deep/ .hot_name_wrap {
  width: 80px;
}
/deep/ .van-nav-bar__text {
  color: beige;
}
/deep/ .van-nav-bar .van-icon {
  color: beige;
}

/deep/ .xiala {
  margin-left: 400px;
}

/deep/ .activ {
  background:darkgray;
  border: 1px solid white;
  color: #fff;
}
</style>
